<template>
  <el-container style="min-height: 100vh">
    <!-- 左菜单栏 -->
    <el-aside width="sideWidth +'px'" style="
          background-color: rgb(238, 241, 246);
          min-height: 100%;
          box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
        ">
      <el-menu :default-openeds="['1']" style="min-height: 100%; overflow-x: hidden" background-color="rgb(48,65,82)"
        text-color="#fff" active-text-color="#ffd04b" :collapse-transition="false" :collapse="isCollapse">
        <div style="height: 60px; line-height: 60px; text-align: center">
          <img src="../assets/logo.png" alt="" style="width: 23px; position: relative; top: 5px" />
          <b style="color: white; margin-left: 10px" v-show="logeTextShow">后台管理系统</b>
        </div>

        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>
            <span slot="title">导航一</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">导航三</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="3-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">
            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!-- 右侧内容 -->
    <el-container>
      <!-- 头部 -->
      <el-header style="
            font-size: 12px;
            border-bottom: 1px solid #ccc;
            line-height: 60px;
            display: flex;
          ">
        <div style="flex: 1; font-size: 18px">
          <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
        </div>
        <el-dropdown style="width: 70px; cursor: pointer">
          <span>王小虎</span>
          <i class="el-icon-arrow-down" style="margin-left: 5px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <!-- 内容 -->
      <el-main>
        <div style="margin-bottom: 30px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入用户名" v-model="username">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>

          <el-input style="width: 200px" placeholder="请输入邮箱" v-model="input2">
            <i slot="prefix" class="el-input__icon el-icon-message"></i>
          </el-input>

          <el-input style="width: 200px" placeholder="请输入地址" v-model="input3">
            <i slot="prefix" class="el-input__icon el-icon-s-promotion"></i>
          </el-input>

          <el-button style="margin-left: 5px" type="primary" @click="locad()">搜索</el-button>
        </div>
        <div style="margin: 18px 0">
          <el-button type="primary">新增<i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button type="danger">批量删除<i class="el-icon-delete"></i></el-button>
          <el-button type="primary">导入<i class="el-icon-bottom-left"></i></el-button>
          <el-button type="primary">导出<i class="el-icon-top-right"></i></el-button>
        </div>
        <el-table :data="tableData" border stripe header-cell-class-name="headerBg">
          <el-table-column prop="id" label="id" width="140"></el-table-column>
          <el-table-column prop="username" label="用户名" width="140"></el-table-column>
          <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
          <el-table-column prop="email" label="邮箱"> </el-table-column> 
          <el-table-column prop="phone" label="电话"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column label="操作" width="200">
            <el-button type="success">编辑<i class="el-icon-edit-outline"></i></el-button>
            <el-button type="danger">删除<i class="el-icon-delete"></i></el-button>
          </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>


<script>
export default {
  name: "HomeView",

  data() {
    return {
      msg: "hellotaotao",
      username: "",
      input2: "",
      input3: "",
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 7,
      collapseBtnClass: "el-icon-s-fold",
      isCollapse: false,
      sideWidth: 200,
      logeTextShow: true,
    };
  },
  created() {
    this.locad();
  },
  methods: {
    locad() {
      fetch("http://localhost/user/page?pageNum=" +this.pageNum +"&" +"pageSize=" +this.pageSize+"&username="+this.username).then((res) => res.json()).then((res) => {
          console.log(res);
          this.tableData = res.data.list;
          this.total = res.data.total;
        });
    },
    //点击收缩按钮触发
    collapse() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        //收缩
        this.sideWidth = 64;
        this.collapseBtnClass = "el-icon-s-unfold";
        this.logeTextShow = false;
      } else {
        //展开
        this.sideWidth = 200;
        this.collapseBtnClass = "el-icon-s-fold";
        this.logeTextShow = true;
      }
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum = pageNum;
      this.locad();
    },
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageSize = pageSize;
      this.locad();
    },
  },
};
</script>

<style>
.headerBg {
  background: #eee !important;
}
</style>
